<template>
  <div class="base" :class="{ 'info-active': isActive }">
    <div class="media-card gap-row-8" @click="() => (isActive = !isActive)">
      <div class="img">
        <EncryptImage :src="props.media.img_path" object-fit="cover" :border-radius="10"></EncryptImage>
      </div>
      <div class="info gap-col-8">
        <div class="max-line-2 text-white font-size-14 font-style-normal font-weight-500 line-height-140">
          {{ props.media.content }}
        </div>
        <div>
          <div class="info-row gap-row-57">
            <div class="info-col gap-col-8">
              <div class="row gap-row-8">
                <div class="mr-1 text-input font-size-12 font-style-normal font-weight-400 line-height-120 d-inline">
                  {{ $t('info.earnInfo.watches') }}
                </div>
                <div class="text-white font-size-14 font-style-normal font-weight-500 line-height-140 d-inline">
                  {{ toKiloString(props.media.stat.view_num) }}
                </div>
              </div>
              <div class="row gap-row-8">
                <div class="mr-1 text-input font-size-12 font-style-normal font-weight-400 line-height-120 d-inline">
                  {{ $t('info.earnInfo.likes') }}
                </div>
                <div class="text-white font-size-14 font-style-normal font-weight-500 line-height-140 d-inline">
                  {{ toKiloString(props.media.stat.like_num) }}
                </div>
              </div>
            </div>
            <div class="info-col gap-col-8">
              <div class="row gap-row-8">
                <div class="mr-1 text-input font-size-12 font-style-normal font-weight-400 line-height-120 d-inline">
                  {{ $t('info.earnInfo.comments') }}
                </div>
                <div class="text-white font-size-14 font-style-normal font-weight-500 line-height-140 d-inline">
                  {{ toKiloString(props.media.stat.comment_num) }}
                </div>
              </div>
              <div class="row gap-row-8">
                <div class="mr-1 text-input font-size-12 font-style-normal font-weight-400 line-height-120 d-inline">
                  {{ $t('info.earnInfo.purchases') }}
                </div>
                <div class="text-white font-size-14 font-style-normal font-weight-500 line-height-140 d-inline">
                  {{ toKiloString(props.media.stat.buy_num) }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <v-expand-transition>
      <div v-show="isActive" class="mx-4">
        <v-divider class="mb-4"></v-divider>
        <v-row class="px-1 py-2">
          <v-col
            v-for="(card, index) in totalPerformanceCards"
            :key="`performance-card-${index}`"
            cols="6"
            class="px-2 py-2"
          >
            <EarnPerformCard :label="card.label" :text="card.text"></EarnPerformCard>
          </v-col>
        </v-row>
      </div>
    </v-expand-transition>
  </div>
</template>
<script setup>
import EarnPerformCard from '@/components/mine/EarnPerformCard.vue'
import EncryptImage from '@/components/multimedia/EncryptImage.vue'
import { ref } from 'vue'
import { toKiloString, toCommaString, toFixedString } from '@/utils/string-helper.js'
import { $t } from '@/i18n'
import { VExpandTransition, VRow, VCol } from 'vuetify/lib/components/index.mjs'

const props = defineProps({
  media: {
    type: Object,
    required: true,
  },
})

const totalPerformanceCards = ref([
  { label: 'label.earnIndex.watches', text: toCommaString(props.media.stat.view_num) },
  { label: 'label.earnIndex.dailyWatches', text: toCommaString(props.media.stat.view_avg_num) },
  { label: 'label.earnIndex.collect', text: toCommaString(props.media.stat.like_num) },
  { label: 'label.earnIndex.comments', text: toCommaString(props.media.stat.comment_num) },
  { label: 'label.earnIndex.shares', text: toCommaString(props.media.stat.share_num) },
  { label: 'label.earnIndex.purchases', text: toCommaString(props.media.stat.buy_num) },
  { label: 'label.earnIndex.periodProfit', text: '$' + toFixedString(props.media.stat.in_come, 2) },
  { label: 'label.earnIndex.completionTimes', text: toCommaString(props.media.stat.play_complete_num)},
  { label: 'label.earnIndex.broadcastRevenueIncentive', text: '$' + toFixedString(props.media.stat.in_come_play_complete, 2)},
])

const isActive = ref(false)
</script>
<style scoped lang="scss">
.base {
  border-radius: 0.625rem;
  border: 2px solid;
  border-color: var(--color-primary-red, #333546);
  background: var(--bg-dialog, #333546);
}
.media-card {
  display: flex;
  //width: 21.4375rem;
  padding: 0.5rem 1rem;
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  align-items: flex-start;

  .img {
    width: 4.3125rem;
    height: 6.5rem;
    flex-shrink: 0;

    border-radius: 0.625rem;
    background: lightgray -2176.624px -5082.391px / 13369.103% 5920.138% no-repeat;
  }

  .info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0;
  }
}

.info-active {
  border-color: var(--color-primary-red, #f42c52);
}

.right-space {
  margin-right: calc(3.5625rem - 0.5rem);

  div {
    white-space: nowrap;
  }
}

.max-line-2 {
  height: 2.5rem;
  overflow: hidden;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* number of lines to show */
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.info-col {
  display: flex;
  flex-direction: column;

  .row {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
  }
}

.info-row {
  display: flex;
  flex-direction: row;
  flex: 1;
}
</style>
